<template>
	<div id="mailList">
		<div class="i_maxW">
			<div class="u_crumbs">
				<router-link to="/personal/index" class="fade-router">个人中心</router-link>
				<strong><i>></i>我的日记</strong>
			</div>
			<!--  -->
			<div class="u_resource">
				<div class="u_resourceH clear">
					<div class="u_resourceH_l fl">
						<router-link to="/personal/journal/add" class="fade-router">写日记</router-link>
					</div>
				</div>
				<!--  -->
				<ul>
					<li class="resourceLs" v-for="item in journalList" :key="item.id">
						<div class="resource_link log clear">
							<router-link class="fade-router" :to="{path:'/personal/journal/detail',query:{id: item.id}}">
								{{ item.name }}
							</router-link>
							<div class="resource_ioperation fr">
								<img v-if="item.authority == 0" src="../../assets/images/lockno.png"class="lock_icon">
								<img v-else src="../../assets/images/lockoff.png"class="lock_icon">
								<span>{{ item.create_time }} </span>
								
								<el-popover
									placement="bottom"
									width=""
									popper-class="ioperation_hover"
									trigger="hover">
									<ul class="r_ioperation">
										<li v-if="item.authority" @click="changeAuthority(item.id,0)">设为私密日记</li>
										<li v-else @click="changeAuthority(item.id,1)">设为公开日记</li>
										<li >
											<router-link :to="{path:'/personal/journal/edit',query:{id: item.id}}" class="fade-router">编辑</router-link>
										</li>
										<li @click="deleteJournal(item.id)">删除</li>
									</ul>
									<i slot="reference" class="el-icon-arrow-down"></i>
								</el-popover>
							</div>
						</div>
					</li>
				</ul>

				<div class="pageing" v-show="total_number > page_size">
					<el-pagination
				      @current-change="change_page"
				      :current-page="page_index"
				      :page-size="page_size"
				      layout="prev, pager, next"
				      :total="total_number">
				    </el-pagination> 
				</div>

				<div class="dependent" v-if="journalList.length === 0">
					<i class="ipm image_nofound"></i>
					<p>还没发现任何相关的内容哦~</p>
				</div>
			</div>	
		</div>

	</div>
</template>

<script>

	export default {
		name: '',
		data(){
			return {
				page_index:1,
				page_size:this.$g.page_size,
				total_number:0,
				journalList: []
			};
		},
		mounted () {
		  	this.getJournalList()
		},
		methods: {
			/**
			 * 数据列表
			 * @DateTime 2020-03-05T11:14:03+0800
			 * @return   {[type]}                 [description]
			 */
			getJournalList() {
				let success = (res => {		
					let data = res.data;
					this.journalList = data.data;
					this.total_number = data.data_sum
					this.page_index = parseInt(data.page_index)
				})
				this.$ajax({
					url: '/api/resource/my_journal',
					params: {
						create_id: this.$g.user_id,
						page: this.page_index,
						size:this.page_size
					},
					func:{success:success}
				})
			},
			change_page( val ) {
        		this.page_index = val
    			this.getJournalList();
            },
            /**
             * 删除
             * @DateTime 2020-03-05T11:13:45+0800
             * @param    {[type]}                 id [description]
             * @return   {[type]}                    [description]
             */
            deleteJournal(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them'
				}).then(() => {
					let success = (res => {		
						this.$message.success(res.msg)
						this.page_index = 1
						this.getJournalList();
					})
					this.$ajax({
						url: '/api/resource/journal',
						method: 'delete',
						params: {id: id},
						func:{success:success}
					})
				})
            },
            /**
             * 设为日记是否公开
             * @DateTime 2020-03-05T11:14:45+0800
             * @param    {[type]}                 id        [日记id]
             * @param    {[type]}                 authority [1=公开， 0=私密]
             * @return   {[type]}                           [description]
             */
            changeAuthority(id, authority) {
            	this.$confirm('此操作是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them'
				}).then(() => {
					let success = (res => {		
						this.$message.success(res.msg)
						this.getJournalList();
					})
					this.$ajax({
						url: '/api/resource/journal',
						method: 'put',
						data: {id: id,authority:authority},
						func:{success:success}
					})
				})
            }
		}
	}
</script>